<template>
  <div>
      <div class="address">
        <h3>商品管理 > 进货</h3>
      </div>
      <div class="add">
        <el-button @click="addOneRow" v-if="isEditNewRow === -1">新增一行</el-button>
        <div v-else>
          <el-button @click="cancleOneRow">取消 <i class="el-icon-close"></i></el-button>
          <el-button @click="saveOneRow">保存<i class="el-icon-upload el-icon--right"></i></el-button>
        </div>
      </div>
       <div class="show-stock"> 
        <el-scrollbar style="height: 100%;"> <!-- 滚动条 -->
          <el-table
            class="room-type-table TABLEMINWIDH"
            ref="multipleTable"
            :data="restockOrders"
            :key="updateTableKey"
            tooltip-effect="dark"
            style="width: 100%;font-size: 1.5rem;">
            <!-- 选择框 -->
            <el-table-column
              type="selection"
              min-width="10%">
            </el-table-column>
            <!-- 订单号 -->
            <el-table-column
              label="订单号"
              prop="orin"
              header-align="center"
              align="center"
              min-width="10%">
            </el-table-column>
            <!-- 商品名 -->
            <el-table-column
              label="商品"
              header-align="center"
              align="center"
              class="test"
              min-width="15%">
              <template slot-scope="scope">
                <el-input v-model="newGoodName" v-if="scope.$index === isEditNewRow"></el-input>
                <span v-else>{{scope.row.goodTitle}}</span>
              </template>
            </el-table-column>
            <!--  单价 -->
            <el-table-column
              label="单价"
              header-align="center"
              align="center"
              class="test"
              min-width="15%">
              <template slot-scope="scope">
                <el-input v-model="newGoodPrice" v-if="scope.$index === isEditNewRow"
                style="width:100px"></el-input>
                <span class="money" v-else>
                  <i class="hotel-management-icon icon-renminbi1688"></i>
                  <span class="price">{{scope.row.goodPrice}}</span> 
                </span>
              </template>
            </el-table-column>
            <!-- 数量 -->
            <el-table-column
              label="数量"
              header-align="center"
              align="center"
              min-width="10%">
              <template slot-scope="scope">
                <el-input v-model="newGoodNumber" v-if="scope.$index === isEditNewRow"></el-input>
                <span v-else>{{scope.row.amount}}</span>
              </template>
            </el-table-column>
            <!-- 进货时间 -->
            <el-table-column
              label="进货时间"
              header-align="center"
              align="center"
              min-width="25%">
              <template slot-scope="scope">
                <span>{{timeFormatter(scope.row.orderTime)}}</span>
              </template>
            </el-table-column>
            <!-- 总价 -->
            <el-table-column
              label="总价"
              header-align="center"
              align="center"
              min-width="10%"
              show-overflow-tooltip>
              <template slot-scope="scope">
                <span class="money" v-if="scope.$index === isEditNewRow">
                  <i class="hotel-management-icon icon-renminbi1688"></i>
                  <span class="price">{{newGoodNumber * newGoodPrice}}</span> 
                </span>
                <span class="money" v-else>
                  <i class="hotel-management-icon icon-renminbi1688"></i>
                  <span class="price">{{scope.row.totalPrice}}</span> 
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar><!-- /滚动条 -->
      </div>
  </div>
</template>

<script>
import { showMessage } from '@/utils/utils'
import { loadingMixin } from '@/utils/mixins/loading'
import { timeFormatter } from '@/utils/utils'
import { getAllRestockOrder, addOneRestockOrder } from '@/api/api'
export default {
  mixins: [loadingMixin],
  name: 'Stock',
  data() {
    return {
      updateTableKey: Math.random(),
      restockOrders: [],

      // 新增行index
      isEditNewRow: -1,
      newGoodName:'',
      newGoodPrice:'',
      newGoodNumber:'',
    }
  },
  methods: {
    timeFormatter,
    // 保存新增
    saveOneRow(){
      let obj = {
        "amount": this.newGoodNumber * 1,
        "goodPrice": this.newGoodPrice * 1.0,
        "goodTitle": this.newGoodName,
        "orderTime": this.returnNowTime(),
        "totalPrice": this.newGoodNumber * this.newGoodPrice,
        "orin": this.restockOrders[this.restockOrders.length - 1].orin
      }
      addOneRestockOrder(obj).then(response => {
        if(response.data === '添加成功！') {
          showMessage(this, '保存成功', 'success')
          this.restockOrders[this.restockOrders.length - 1] = obj
          this.isEditNewRow = -1
          this.newGoodName = ''
          this.newGoodPrice = ''
          this.newGoodNumber = ''
          this.updateTableKey = Math.random()
        }
      }).catch(error =>  showMessage(this, '获取添加一条进货信息失败！', 'error'))
    },
    // 取消新增
    cancleOneRow() {
      this.restockOrders.splice(this.restockOrders.length - 1, 1)
      this.isEditNewRow = -1
      this.newGoodName = ''
      this.newGoodPrice = ''
      this.newGoodNumber = ''
    },
    // 新增一行
    addOneRow() {
      let maxOrderId = 0
      for(let obj of this.restockOrders) {
        if(obj.orin > maxOrderId) maxOrderId = obj.orin
      }
      this.isEditNewRow = this.restockOrders.length
      this.restockOrders.push({"amount":'',"goodPrice":'',"goodTitle":"","orderTime":"2022-01-02T12:00:01.000+0000","totalPrice":'',"orin":maxOrderId + 1})
    },
    //格式化现在的时间
    returnNowTime() {
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var Hours = date.getHours();
      var Minutes = date.getMinutes();
      var Seconds = date.getSeconds();
      if (month < 10) month = "0" + month
      if (day < 10) day = "0" + day
      if (Hours < 10) Hours = "0" + Hours 
      if (Minutes < 10) Minutes = "0" + Minutes
      if (Seconds < 10) Seconds = "0" + Seconds
      return year + '-' + month + '-' + day + 'T' + Hours + ':' + Minutes + ':' + Seconds + '.000+0000';
    },
    async load() {
      await Promise.resolve(getAllRestockOrder().then(response => {
        this.restockOrders = response.data.reverse()
      })).catch(error =>  showMessage(this, '获取所有进货订单失败！', 'error'))
    }
  }
}
</script>

<style lang="less" scope>
.address{
  position: relative;
  color: #aa97b0;
  top: -20px;
}
.money{
    display: inline-flex;
    align-items: center;
    color: red;
    margin-left: 5px;
    i{
      position: relative;
      top: 2px;
    }
}
.add{
  width: 100%;
  background-color: #ffffff;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>